<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue</title>
    <!-- development version, includes helpful console warnings -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- production version, optimized for size and speed -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<script>
    console.log(vm.reversedMessage) // => 'olleH'
    vm.message = 'Goodbye'
    console.log(vm.reversedMessage) // => 'eybdooG'
</script>

<body>
    <div id="example">
        <p>Original message: "{{ message }}"</p>
        <p>Reversed message: "{{ reversedMessage }}"</p>
        <p>Reversed message: "{{ reverseMessage() }}"</p>

        <div id="demo">{{ fullName }}</div>


    </div>
    <script>
        var vm = new Vue({
            el: '#example',
            data: {
                message: 'Hello'
            },
            computed: {
                now: function () {
                    return Date.now();
                },
                // a computed getter
                reversedMessage: function () {
                    // `this` points to the vm instance
                    return this.message.split('').reverse().join('')
                }
            },
            // in component
            methods: {
                reverseMessage: function () {
                    return this.message.split('').reverse().join('')
                }
            }
        });

        var vm = new Vue({
            el: '#demo',
            data: {
                firstName: 'Foo',
                lastName: 'Bar',
                fullName: 'Foo Bar'
            },
            watch: {
                firstName: function (val) {
                    this.fullName = val + ' ' + this.lastName
                },
                lastName: function (val) {
                    this.fullName = this.firstName + ' ' + val
                }
            }
        });

        var vm = new Vue({
            el: '#demo',
            data: {
                firstName: 'Foo',
                lastName: 'Bar'
            },
            computed: {
                fullName: function () {
                    return this.firstName + ' ' + this.lastName
                }
            },
            computed: {
                fullName: {
                    // getter
                    get: function () {
                        return this.firstName + ' ' + this.lastName
                    },
                    // setter
                    set: function (newValue) {
                        var names = newValue.split(' ')
                        this.firstName = names[0]
                        this.lastName = names[names.length - 1]
                    }
                }
            }
        })

    </script>
</body>

</html>